<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link href="/layui/css/modules/layer/default/layer.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/index.css"/>
</head>
<body class="main-body-admin">
<nav style="margin-top: 10px;">
    <button class="layui-btn" onclick="load()">导入</button>
    <button class="layui-btn" onclick="add()">新增</button>
    <button class="layui-btn" onclick="edit()">编辑</button>
    <button class="layui-btn layui-btn-danger" onclick="deleteRow()">删除</button>
    <input class="layui-input-inline" id="searchValue"/>
    <button class="layui-btn layui-btn-normal" onclick="search()">搜索</button>
</nav>
<table id="college" lay-filter="test"></table>
<script src="/js/jquery.min.js"></script>
<script src="/js/config/server.js"></script>
<script src="/js/common/login.js"></script>
<script src="/js/common/upload.js"></script>
<script src="/layui/layui.all.js"></script>
<script>
  var table;

  handlerGet('/common/ping', 'admin', function () {
    layui.use('table', function () {
      table = layui.table;
      table.render({
        elem: '#college'
        , height: 515
        , url: host + '/rest/college/listAll' //数据接口
        , page: true //开启分页
        , limit: 15
        , limits : [15, 30, 45]
        , cols: [[ //表头
          {checkbox: true}
          , {field: 'collegeId', title: 'ID', width: 160, sort: true}
          , {field: 'name', title: '学院名', width: 280}
        ]]
      });
    });
  }, function (data) {
    layer.msg('请检查网络并重试'+data.responseText)
  });
  function deleteRow() {
    var checkStatus = table.checkStatus('college');
    layer.confirm('确认删除这些数据', {icon: 3, title: '提示'}, function (index) {
      var idList = '';
      checkStatus.data.forEach(function (item) {
        idList += item.collegeId + delimiter_num;
      });
      handlerDelete('/rest/college', 'admin', idList, function (data) {
        if (data.code === "0") {
          layer.msg("删除成功");
          reloadAll()
        }
      }, function (data) {
        console.log(data)
      });
      layer.close(index);
    });
  }

  function reloadAll() {
    layui.use('table', function () {
      var table = layui.table;
      table.reload('college', {
        url: host + '/rest/college/listAll'
      });
    })
  }

  function updateValue(content, name, value) {
    return content.replace(name + '##VA', value)
  }

  function edit() {
    var checkStatus = table.checkStatus('college');
    if(checkStatus.data.length !== 1){
      layer.msg('请选择一条记录')
    }else{
      var content = $('#editData').html();
      handlerGet('/rest/college/'+checkStatus.data[0].collegeId, 'admin', function (data) {
        content = updateValue(content, 'name', data.data.name);
        tips(content, '编辑数据', function () {
          var mainData = {
            collegeId: checkStatus.data[0].collegeId,
            name: $("#name").val()
          };
          console.log(JSON.stringify(mainData));
          handlerPost('/rest/college', 'admin', JSON.stringify(mainData), function (data) {
            reloadAll();
            layer.msg('配置保存成功')
          }, function (data) {
            layer.msg('保存失败')
          });
        });
      }, function (data) {
        layer.msg('发生错误'+data.msg);
      });

    }
  }

  function add() {
    var content = $('#editData').html();
    content = updateValue(content, 'name', '');
    tips(content, '新增数据', function () {
      var mainData = {
        name: $("#name").val()
      };
      console.log(JSON.stringify(mainData));
      handlerPost('/rest/college', 'admin', JSON.stringify(mainData), function (data) {
        reloadAll();
        layer.msg('配置保存成功')
      }, function (data) {
        layer.msg('保存失败')
      });
    });
  }

  function tips(content, title, confirm) {
    layer.open({
      title: title
      , content: content
      , btnAlign: 'c'
      , resize: true
      , area: ['300px', '200px']
      , btn: ['确认', '取消']
      , yes: function (index, layero) {
        confirm();
      },
      cancel: function () {
      }
    });
  }
  function search() {
    var value = $("#searchValue").val();
    if (value === '' || value === ' ') {
      layer.msg('请输入查询参数');
      return;
    }
    layui.use('table', function () {
      var table = layui.table;
      table.reload('college', {
        url: host+'/rest/college/search?name=' + value+''
        , where: {}
      });
    })
  }
  function load() {
      layer.open({
        title: '从Excel导入'
        , content: $("#loadFromExcel").html()
        , btnAlign: 'c'
        , resize: true
        , area: ['500px', '160px']
        , btn: ['确认', '取消']
        , yes: function (index, layero) {
          uploadFile('admin', host+'/rest/college/upload', function (file) {
            if(file.name.split(".xl").length > 1){
              return 0;
            }else{
              layer.msg("文件格式不正确, 请重新选择文件(应为xls xlsx后缀的文件)");
              return 1;
            }
          });
        }
      });
  }
</script>
<script id="editData" type="text/html">
    <div id="Tips">
        <label for="name">学院名</label>
        <input name="name" type="text" id="name" value="name##VA" required/>
    </div>
</script>

<script id="loadFromExcel" type="text/html">
<div>
    <input type="file" id="selectFile" />
    <progress id="progressBar" value="0" max="100"></progress>
    <span id="percentage"></span>
</div>
</script>
</body>
</html>